<template>
    <div  class="rightTable">
        <p class="info-title">
           属性面板
            <svg class="icon closeButton" aria-hidden="true" @click="close">
                <use xlink:href="#icon-guanbianniu"></use>
            </svg> 
        </p>
        <p style="clear:both;"></p>
        <ul>
            <li v-for="item,index in properties" :key='index' class="line">
                <p>{{item.name}}</p>
                <p>{{item.value}}</p>
            </li>
        </ul>
    </div>
</template>
<script type='module'>
    export default{
        props:['properties'],
        data(){
            return{
                // properties:[{
                //     firstname:'hu',
                //     lastname:'xinli'
                // }]
            }
        },
        methods:{
            close(){
                this.$emit('close')
            }
        }
    }
</script>
<style scoped>

.rightTable{
    position:absolute;
    z-index:2;
    right:10px;
    top:150px;
    border:1px solid aqua;
    width:300px;
    color:aliceblue;
    background-color: rgba(0,0,0,0.4);

}
.line{
    list-style: none;
    padding:0 10px;
    border-bottom:1px solid black;
}
.line p{
    width:50%;
    height: 2em;
    line-height: 2em;
    display: inline-block;
    text-align: left;
}
</style>